<template>
  <div>
    <!-- 订单模块下属六个页面
    1.订单信息 2.超时订单 3.进出信息(本页面) 4.订单评论 5.订单日志 6.物业流水 -->
    <div style="padding-bottom:5px">
      <el-button @click="showAddWindow">添加入场信息</el-button>
      <el-button @click="showSearchWindow">查询</el-button>
    </div>


    <el-table :data="page.records">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户信息Id">
              <span>{{props.row.userInfoId}}</span>
            </el-form-item>
            <el-form-item label="用户名称">
              <span>{{props.row.userInfoName}}</span>
            </el-form-item>
            <el-form-item label="用户电话">
              <span>{{ props.row.userInfoTel }}</span>
            </el-form-item>
            <el-form-item label="车位类型">
              <span>{{ props.row.stallType }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderInfoNum"
        width="150">
      </el-table-column>
      <el-table-column label="入场图片" width="150">
        <template slot-scope="scope">
          <el-image :src="scope.row.entranceImg" style="width:50px;height:50px;"/>
         </template>
      </el-table-column>
      <el-table-column
        label="入场时间"
        prop="entranceEnterTime"
        width="150">
      </el-table-column>
      <el-table-column
        label="出场时间"
        prop="entranceOutTime"
        width="150">
      </el-table-column>
      <el-table-column
        label="车位号"
        prop="stallInfo"
        width="120">
      </el-table-column>
      <el-table-column
        label="车牌号"
        prop="entranceInfoPlate"
        width="120">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showAddWindow2(scope.row)" v-if="scope.row.entranceOutTime==null">添加出场信息</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding-top:5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[3,5,7]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="addWindow">
      <div style="padding-bottom:10px">
      <el-upload
        :headers="headers"
        :on-success="uploadSuccess"
        ref="upload"
        action="http://localhost:9001/order/entranceInfo/uploadImage.certified"
        name="file">
        <el-button type="primary">请上传入场图片</el-button>
      </el-upload>
      </div>
      <div style="padding-bottom:10px">
      <el-input placeholder="请输入车牌号" style="width:200px" v-model="entranceInfo.carPlate"></el-input>
      &nbsp;
      <el-input placeholder="请输入车位号" style="width:200px" v-model="entranceInfo.stallInfo"></el-input>
      </div>
      <el-date-picker v-model="entranceInfo.entranceEnterTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="选择入场时间"></el-date-picker>
      <div style="padding-top:10px">
        <el-button @click="addWindow=false">取 消</el-button>
        <el-button @click="addEntranceInfo">添 加</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="searchWindow">
      <div style="padding-bottom:10px">
      <el-input placeholder="请输入车牌号" style="width:200px" v-model="entranceSelect.carPlate"></el-input>
      &nbsp;
      <el-input placeholder="请输入车位号" style="width:200px" v-model="entranceSelect.stallInfo"></el-input>
      </div>
      <div style="padding-bottom:10px">
      <el-date-picker v-model="entranceSelect.startTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="选择开始时间"></el-date-picker>
      &nbsp;
      <el-date-picker v-model="entranceSelect.endTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="选择结束时间"></el-date-picker>
      </div>
      <el-input placeholder="请输入订单编号" style="width:200px" v-model="entranceSelect.orderInfoNum"></el-input>
      &nbsp;
      <el-select v-model="entranceSelect.isOut" placeholder="已出场/未出场">
        <el-option value="0" label="已出场"></el-option>
        <el-option value="1" label="未出场"></el-option>
      </el-select>
      <div style="padding-top:10px">
        <el-button @click="searchWindow=false">取 消</el-button>
        <el-button @click="showEntranceInfo">查 询</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="addWindow2">
      <el-date-picker v-model="entranceInfo2.entranceOutTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="选择出场时间"></el-date-picker>
      <div>
        <el-button @click="addWindow2=false">取 消</el-button>
        <el-button @click="addEntranceOut">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'EntranceInfo',
  data () {
    return {
      page: [],
      addWindow: false,
      addWindow2: false,
      searchWindow: false,
      entranceInfo: {
        stallInfo: "",
        carPlate: "",
        entranceImg: "",
        entranceEnterTime: ""
      },
      entranceInfo2: {
        stallInfoId: "",
        carPlate: "",
        entranceOutTime: ""
      },
      headers:{
        authorization:localStorage.getItem("authorization")
      },
      entranceSelect: {
        startTime: "",
        endTime: "",
        stallInfo: "",
        orderInfoNum: "",
        entranceInfoPlate: "",
        isOut: ""
      },
      entranceSelected: {
        startTime: "",
        endTime: "",
        stallInfo: "",
        orderInfoNum: "",
        entranceInfoPlate: "",
        isOut: ""
      }
    }
  },
  methods:{
    showAddWindow(){
      this.entranceInfo.stallInfo = ""
      this.entranceInfo.carPlate = ""
      this.entranceInfo.entranceImg = ""
      this.entranceInfo.entranceEnterTime = ""
      this.addWindow = true
    },
    showAddWindow2(entrance){
      this.entranceInfo2.carPlate = entrance.entranceInfoPlate
      this.entranceInfo2.stallInfo = entrance.stallInfo
      this.entranceInfo2.entranceOutTime = ""
      this.addWindow2 = true
    },
    showSearchWindow(){
      this.entranceSelect.startTime = ""
      this.entranceSelect.endTime = ""
      this.entranceSelect.stallInfo = ""
      this.entranceSelect.orderInfoNum = ""
      this.entranceSelect.entranceInfoPlate = ""
      this.entranceSelect.isOut = ""
      this.searchWindow = true
    },
    addEntranceInfo(){
      this.$http.put("/order/entranceInfo/addEnterInfo.certified",this.entranceInfo).then(resp=>{
        if(resp.data.flag){
          this.$alert(resp.data.message + resp.data.data.extraInfo).then(()=>{
              this.addWindow = false
              this.showEntranceInfoProper("","")
          })
        }else this.$alert(resp.data.message)
      })
    },
    addEntranceOut(){
      this.$http.put("/order/entranceInfo/addOutInfo.certified",this.entranceInfo2).then(resp=>{
        if(resp.data.flag){
          this.$alert(resp.data.message).then(()=>{
              this.addWindow2 = false
              this.showEntranceInfoProper(this.page.current,this.page.size)
          })
        }else this.$alert(resp.data.message)
      })
    },
    uploadSuccess(responce){
      this.entranceInfo.entranceImg = responce.data
      this.$refs.upload.clearFiles()
      this.$message("上传成功 重复上传以最新上传图片为准")
    },
    showEntranceInfoProper(pageNum,pageSize){
      this.$http.get("/order/entranceInfo/findEntrance.certified",{
        params:{
          pageNum:pageNum==""?1:pageNum,
          pageSize:pageSize==""?3:pageSize,
          startTime: this.entranceSelected.startTime,
          endTime: this.entranceSelected.endTime,
          stallInfo: this.entranceSelected.stallInfo==""?null:this.entranceSelected.stallInfo,
          orderInfoNum: this.entranceSelected.orderInfoNum==""?null:this.entranceSelected.orderInfoNum,
          entranceInfoPlate: this.entranceSelected.entranceInfoPlate==""?null:this.entranceSelected.entranceInfoPlate,
          isOut: this.entranceSelected.isOut
        }
      }).then(resp=>{　
        if(resp.data.flag) {
            this.page = resp.data.data
        }
        else this.$alert(resp.data.message)　　
      })
    },
    handleSizeChange(val) {
      this.showOrderProper("",val)
    },
    handleCurrentChange(val) {
      this.showOrderProper(val,this.page.size)
    },
    showEntranceInfo(){
      this.entranceSelected.startTime = this.entranceSelect.startTime
      this.entranceSelected.endTime = this.entranceSelect.endTime
      this.entranceSelected.stallInfo = this.entranceSelect.stallInfo
      this.entranceSelected.orderInfoNum = this.entranceSelect.orderInfoNum
      this.entranceSelected.entranceInfoPlate = this.entranceSelect.entranceInfoPlate
      this.entranceSelected.isOut = this.entranceSelect.isOut
      this.showEntranceInfoProper("","")
      this.searchWindow = false
    },
  },
  created(){
    this.showEntranceInfoProper("","")
  }
}
</script>

<style>
</style>
